<template>
  <div>
    <el-container>
      <el-aside width="30%">
        <img :src="courseInfo.coverImage">
      </el-aside>
      <el-container>
        <el-header>
          {{ courseInfo.title }}
        </el-header>
        <el-main>
          <div>
            <p>开课时间： 2022年09月05日 ~ 2022年12月30日</p>
            <p>学时安排： 3-5小时每周</p>
          </div>
        </el-main>
        <el-footer>

        </el-footer>
      </el-container>
    </el-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程描述" name="first">
        <div>
          {{ courseInfo.describe }}
        </div>
      </el-tab-pane>
      <el-tab-pane label="课程章节" name="second">
        <el-tree :data="chapterList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-tab-pane>
      <el-tab-pane label="课程评价" name="third">
        <div class="card-content">
          <div class="msg-list">
            <div class="item-msg" v-for="(item, index) in msgList" :key="index">
              <div class="item-msg-left">
                <div class="avatar-box">
                  <img :src="item.avatarUrl">
                </div>
                <div class="msg-info">
                  <div class="nick-name-box">
                    <span class="nick-name">{{ item.nickName }}</span>
                    <span class="tip">回复了你的评论</span>
                  </div>
                  <div class="msg-content">
                    <span>{{ item.content }}</span>
                  </div>
                </div>
              </div>
              <div class="item-msg-right">
                <p class="time">{{ item.time }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="章节详情" :visible.sync="open" width="1500px" append-to-body>
      <h1>
        {{ chapterInfo.title }}
      </h1>
      <hr>
      <div>内容：</div>
      <div v-if="chapterInfo.videoUrl != null">
        <iframe :src="chapterInfo.videoUrl" width="1000px" height="1000px" scrolling="no" border="0" frameborder="no"
          framespacing="0" allowfullscreen="true"> </iframe>
      </div>
      <div v-html="chapterInfo.content"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeInfo">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCourse } from "@/api/course/course";
import { listChapter, getChapter } from "@/api/course/chapter";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: 'index',
  components: {
    Treeselect
  },
  data() {
    return {
      open: false,
      loading: true,
      courseId: null,
      chapterInfo: {},
      courseInfo: {
        coverImage: "",
        describe: ""
      },
      courseList: [
        {
          imageUrl: 'http://img-ph-mirror.nosdn.127.net/kX_URvWcbjEBbFQEOqJrtQ==/6619105079188646274.jpg?imageView&type=webp',
          courseName: '计算机系统设计',
          teacher: '徐雨隽',
          info: '进行至第7周',
          studentNum: 890,
        },
      ],
      // 章节表格数据
      chapterList: [],
      // 章节树选项
      chapterOptions: [],
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      options: [{
        value: '选项1',
        label: '第1次开课'
      }, {
        value: '选项2',
        label: '第2次开课'
      }, {
        value: '选项3',
        label: '第3次开课'
      }, {
        value: '选项4',
        label: '第4次开课'
      }, {
        value: '选项5',
        label: '第5次开课'
      }, {
        value: '选项6',
        label: '第6次开课'
      }],
      value: '',
      activeName: 'first',
      msgList: [
        {
          avatarUrl: 'https://portrait.gitee.com/uploads/avatars/user/2965/8897307_zy3329929364_1620291507.png!avatar60',
          nickName: 'Yancy Zhang',
          content: '这是一条评论',
          time: '2022-11-8'
        },
        {
          avatarUrl: 'https://portrait.gitee.com/uploads/avatars/user/3054/9163010_kindnit_1621831142.png!avatar60',
          nickName: 'Kidint',
          content: '这是一条评论',
          time: '2022-11-8'
        },
        {
          avatarUrl: 'https://foruda.gitee.com/avatar/1667280663376789253/5504239_lds0826_1667280662.png!avatar30',
          nickName: '化身强盗',
          content: '这是一条评论',
          time: '2022-11-8'
        },
        {
          avatarUrl: 'https://portrait.gitee.com/uploads/avatars/user/2965/8897307_zy3329929364_1620291507.png!avatar60',
          nickName: 'Yancy Zhang',
          content: '评论测试',
          time: '2022-11-8'
        },
      ],
      data: [{
        label: '第一章 计算机系统结构的基本概念',
        children: [{
          label: '1.1 计算机系统结构的定义及课程介绍'
        }, {
          label: '1.2 计算机系统结构的基础知识'
        }, {
          label: '1.3 计算机系统设计的内容'
        }, {
          label: '1.4 加快经常性事件'
        }, {
          label: '1.5 Amdahl定律'
        }, {
          label: '1.6 CPU性能公式'
        }, {
          label: '1.7 局部性原理'
        }, {
          label: '1.8  提高并行性的技术途径'
        }, {
          label: '1.9  计算机系统评价'
        }, {
          label: '1.10 计算机系统结构的发展'
        }, {
          label: '1.11 器件及应用对系统结构的影响'
        }, {
          label: '第一章章节测试'
        },]
      }, {
        label: '第二章 指令系统',
        children: [{
          label: '2.1 基本概念与分类'
        }, {
          label: '2.2 指令系统的发展与改进'
        }, {
          label: '2.3 MIPS指令系统'
        }, {
          label: '第二章单元测试'
        },]
      }, {
        label: '第三章流水线技术',
        children: [{
          label: '3.1流水线的基本概念'
        }, {
          label: '3.2流水线的性能指标（1）'
        }, {
          label: '3.3流水线的性能指标（2）'
        }, {
          label: '3.4单功能非线性流水线的调度'
        }, {
          label: '3.5相关'
        }, {
          label: '3.6流水线冲突（1）'
        }, {
          label: '3.7流水线冲突（2）'
        }, {
          label: '3.8流水线的实现（1）'
        }, {
          label: '3.9流水线的实现（2）'
        }, {
          label: '第三章流水线技术测试'
        },]
      }, {
        label: '第四章 指令级并行',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }, {
        label: '第五章 存储系统',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }, {
        label: '第六章 I/O系统',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }, {
        label: '第七章 互连网络',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }, {
        label: '第八章 多处理器',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      }, {
        label: '第九章 计算机体系结构未来发展趋势',
        children: [{
          label: '二级 2-1'
        }, {
          label: '二级 2-2'
        }]
      },],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      queryParams: {
        courseId: null,
        title: null,
        parentId: null,
        orderNum: null,
      },
    }
  },
  created() {
    //  获取路由id
    this.courseId = this.$route.params.id;
    if (this.courseId) {
      this.queryParams.courseId = this.courseId;
      this.loading = true;
      this.getCourseInfo(this.courseId);
      listChapter(this.queryParams).then(response => {
        this.chapterList = this.handleTree(response.data, "id", "parentId");
        this.loading = false;
      })
    }
  },
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    handleNodeClick(data) {
      this.open = true;
      this.chapterInfo = data;
      console.log(data);
    },
    closeInfo() {
      this.open = false;
      this.chapterInfo = {};
    },
    getCourseInfo(courseId) {
      getCourse(courseId).then(res => {
        console.log(res.data)
        this.courseInfo = res.data;
      })
    },
    /** 转换章节数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children
      };
    },
    /** 查询章节下拉树结构 */
    getTreeselect() {
      listChapter(this.queryParams).then(response => {
        this.chapterOptions = [];
        const data = { id: 0, title: '顶级节点', children: [] };
        data.children = this.handleTree(response.data, "id", "parentId");
        this.chapterOptions.push(data);
      });
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
  }
}
</script>

<style scoped>
.el-header {
  text-align: center;
  text-size-adjust: 25px;
  line-height: 60px;
}

.el-footer {
  line-height: 20px;
}

.el-aside {
  text-align: center;
  line-height: 200px;
}

.el-main {
  line-height: 25px;
}

body>.el-container {
  margin-bottom: 40px;
}

.course-heading-intro {
  background-color: #F5F8F4;
  padding: 30px 30px 20px;
  margin-bottom: 48px;
  color: #333333;
}

.course-heading-intro_intro {
  margin-bottom: 10px;
  font-size: 14px;
}

.course-heading-intro_team {
  font-size: 16px;
  text-align: right;
}

.category-title {
  padding: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
}

.item-msg {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f2;
  padding: 20px 0;
}

.item-msg-left {
  display: flex;
}

.avatar-box {
  margin-right: 10px;
}

.avatar-box img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.nick-name-box .nick-name {
  margin-right: 8px;
  color: #222226;
}

.nick-name-box .tip {
  color: #99a;
}

.msg-content {
  padding: 10px 0;
  color: #222226;
  font-weight: bolder;
}

.time {
  color: #99a;
}
</style>
